<template>
  <div class="Echarts2">
    <div :id="echart" style="width: 100%;height:100%;"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    echart: {
      default: 'detail'
    },
    stateData: {
      type: Array
    }
  },
  data() {
    return {
      xData: [],
      yData:[]
    };
  },
  watch: {
    stateData: {
      handler(val) {
        if (val.length>0) {
          this.xData = val.map(item => item.date)
          this.yData = val.map(item => item.count)
          this.Echarts()
        }
      },
      immediate:true
    }
  },
  mounted() {
   
  },
  methods: {
    Echarts() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById(this.echart));
      // 指定图表的配置项和数据
      const option = {
        tooltip: {
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            y: '15%',
            y2: '20%'
        },
        legend: {
          show: true,
          // data: ["新增", "续签", "变更",'到期'],
          right: '30',
          icon: 'roundRect', //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
        },
        xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              rotate:-40
                // {number}
          },
          itemStyle: {
                
            },
            data: this.xData,
            axisTick: {
              show: false
          },
          boundaryGap:false,
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          }
        },
        calculable: true,
        series: [
          {
            name: '',
            type: 'line',
            stack: "xxx",
            data: this.yData,
            smooth: true,
            barWidth:'50%',
            itemStyle: {//自定义颜色
              normal: { color: "#EBCF9B" },
            },
            areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(235,207,155,1)'
									},
									{
										offset: 1,
										color: 'rgba(235,207,155,0.5)'
									}
								], false),
							}
						},
          },
        ],
    };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.Echarts2{
  height: 100%;
  margin-top: -24px;
}
</style>
